<template>
  <div class="wrapper" ref="wrapper">
    <div id="home">
      <div class="inp">
        <input type="text" placeholder="搜索菜谱、食材或菜单...">
        <button>今日签到</button>
      </div>
      <swiper v-if="arr.length>0" :options="swiperOption" class="swiper">
        <swiper-slide v-for="(i,index) in arr" :key="index">
          <router-link :to="'/zhuan/'+i.ID">
            <img :src="i.img_src" alt="">
          </router-link>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>

        <!-- <div class="swiper-button-prev" slot="button-prev"></div>

            <div class="swiper-button-next" slot="button-next"></div> 
        -->

        <div class="swiper-scrollbar" slot="scrollbar"></div>

      </swiper>
      <ul class="ul">

        <router-link to="" tag="li">
          <img src="/static/img/may_4.png" alt="">
          <span>菜谱分类</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_5.png" alt="">
          <span>食材大全</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_6.png" alt="">
          <span>专题</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_7.png" alt="">
          <span>菜单</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_8.png" alt="">
          <span>珍选</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_9.png" alt="">
          <span>一周热门</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_10.png" alt="">
          <span>人气菜谱</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_11.png" alt="">
          <span>家常菜</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_12.png" alt="">
          <span>食疗养生</span>
        </router-link>

        <router-link to="" tag="li">
          <img src="/static/img/may_13.png" alt="">
          <span>福利社</span>
        </router-link>

      </ul>
      <div class="xia_sw">
        <swiper v-if="arr.length>0" :options="swiperOptiontwo" class="swiper-two">
          <swiper-slide v-for="(i,index) in arr" :key="index" class="swiper-slide_two">
            <router-link to="">
              <img :src="i.img_src" alt="">
            </router-link>
          </swiper-slide>
        </swiper>
      </div>

      <div id="content">
        <router-link tag="div" v-for="(x,index) in list" :to="'/sho_one/'+x.ID" :key="index" class="content_slide">
          <div v-show="false">
            {{b=(()=>{return x.imgarr.split(";")[0]})()}} {{c=(()=>{return x.list_name.length>15?x.list_name.substr(0,12)+"...":x.list_name})()}}
          </div>
          <div class="content_sd_img">
            <img :src="b" alt="">
          </div>
          <div class="content_sd_txt">
            <div>{{x.sub_tit}}</div>
            <div>{{c}}</div>
            <div>{{x.menu}}</div>
          </div>
          <!-- <div>{{x.author_name}}</div> -->

        </router-link>
      </div>
    </div>
  </div>

</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Scroll from "better-scroll";
export default {
  data: () => ({
    swiperOption: {
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      autoplay: {
        // disableOnInteraction: false,
        delay: 1000
      },
      //开启无限循环
      loop: true
    },
    swiperOptiontwo: {
      // loop: true
      pagination: {
        el: ".swiper-pagination",
        clickable: true
        // width: "40%"
      }
    },
    arr: [],
    list: []
  }),
  components: {
    swiper,
    swiperSlide
  },
  created() {
    this.$http
      .get("/api/menu/silderPage")
      .then(result => {
        // console.log(result.data);
        let { data } = result;
        this.arr = data;
      })
      .catch(err => {
        console.log(err);
      });

    this.$http
      .get("/api/menu/menuList")
      .then(result => {
        // console.log(result);
        this.list = result.data;
        // console.log(this.list);
      })
      .catch(err => {
        console.log(err);
      });
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll = new Scroll(this.$refs.wrapper, { click: true });
    });
  },
  methods: {}
};
</script>

<style lang="scss">
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  #home {
    width: 100%;
    .inp {
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      text-align: center;

      > input {
        width: calc(85% - 4rem);
        height: 60%;
        border: none;
        border-radius: 20px;
        border: 1px solid #e7e7e7;
        background: #f6f6f6 url(/static/img/may_3.png) no-repeat 10% center;
        background-size: 5%;
        outline: none;
        font-size: 12px;
        color: #b6b6b6;
        padding-left: 10%;
        box-sizing: border-box;
      }
      > button {
        width: 4rem;
        height: 60%;
        border: none;
        border-radius: 20px;
        background: #f6f6f6;
        outline: none;
        border: 1px solid #e7e7e7;
        color: #b6b6b6;
        font-size: 12px;
      }
    }
    .swiper {
      width: 100%;
      // height: 3rem;
      .swiper-slide {
        width: 100%;
        // pointer-events: none;
        > a {
          display: block;
          > img {
            width: 100%;
          }
        }
      }
    }

    .ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      > li {
        width: 20%;
        height: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        > img {
          width: 35%;
          margin: 0 auto;
        }
        > span {
          display: block;
          font-size: 14px;
        }
      }
    }
    #content {
      width: 100%;
      padding: 0.5rem;
      box-sizing: border-box;
      border-top: 1px solid #ccc;

      .content_slide {
        width: 100%;
        border-bottom: 1px solid #ccc;
        display: flex;
        padding-bottom: 0.5rem;
        margin-top: 0.5rem;
        .content_sd_img {
          width: 30%;
          // padding-top: 0.5rem;
          > img {
            width: 100%;
            // height: calc(width);
          }
        }
        .content_sd_txt {
          font-size: 0.6rem;
          flex-grow: 1;
          padding-left: 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > div {
            // font-size:
            &:nth-child(1) {
              font-size: 0.8rem;
            }
            &:nth-child(3) {
              font-size: 0.5rem;
            }
          }
        }
      }
    }
  }
}
.xia_sw {
  width: 100%;
  padding: 0.7rem 0 0.7rem 0.7rem;
  // overflow: hidden;
  box-sizing: border-box;
  .swiper-two {
    width: 100%;
    .swiper-wrapper {
      width: 100%;

      .swiper-slide_two {
        width: 98% !important;
        // padding-right: 0.2rem;
        // pointer-events: none;
        > a {
          display: block;
          width: 98%;
          margin: 0;
          > img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>